<template>
  <!--排行榜-->
    <ul class="rank-list">
        <li v-for="(rankItem ,index) in rank" :key="rankItem.id">
            <!--                list-rank3.png-->
            <img src="@/assets/image/list-rank1.png" alt="" v-if="index%3 == 1">
            <img src="@/assets/image/list-rank2.png" alt="" v-else-if="index%3 == 2">
            <img src="@/assets/image/list-rank3.png" alt="" v-else>
            <p class="rank-list-phone">{{rankItem.phone}}</p>
            <span>{{rankItem.money}}.0元</span>
        </li>
    </ul>
</template>

<script>
import {getRankApi} from "@/api/invest";
import {layxMessage} from "@/utils/layxUtil";

export default {
    name: "RankList",
    data(){
        return{
            rank: [
                {
                    phone: "",
                    money: 0
                }
            ],
        }
    },
    methods:{
        //      获取排行榜信息
        getRankData(){
            getRankApi().then(res =>{
                console.log('Rank',res)
                this.rank = res
            }).catch(err=>{
                console.error(err)
                layxMessage.warning("获取排行榜信息失败")
            })
        },

    },
    mounted() {
        this.getRankData()

    }
}
</script>

<style scoped>

</style>
